<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物流预约报价系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; }
        :root {
            --primary: #2c3e50; --secondary: #3498db; --success: #2ecc71; 
            --warning: #f39c12; --danger: #e74c3c; --light: #ecf0f1; 
        }
        body { background: linear-gradient(135deg, #1a2a6c, var(--primary)); color: var(--light); min-height: 100vh; }
        .navbar { background: rgba(26, 37, 48, 0.95); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
        .logo { display: flex; align-items: center; gap: 12px; }
        .logo i { font-size: 1.8rem; color: var(--secondary); }
        .logo h1 { font-size: 1.4rem; background: linear-gradient(90deg, var(--secondary), var(--success)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .nav-links { display: flex; gap: 15px; }
        .nav-link { color: var(--light); text-decoration: none; padding: 8px 15px; border-radius: 20px; display: flex; align-items: center; gap: 8px; }
        .nav-link.active, .nav-link:hover { background: rgba(52, 152, 219, 0.2); }
        .container { max-width: 800px; margin: 20px auto; padding: 0 15px; }
        .header { text-align: center; margin-bottom: 25px; }
        .header h2 { font-size: 1.8rem; margin-bottom: 8px; background: linear-gradient(90deg, var(--secondary), var(--success)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .header p { color: #bdc3c7; font-size: 1rem; max-width: 700px; margin: 0 auto; }
        .panel { background: rgba(26, 37, 48, 0.8); border-radius: 12px; padding: 20px; margin-bottom: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
        .panel-header { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; color: var(--secondary); padding-bottom: 10px; border-bottom: 1px solid rgba(127,140,141,0.3); }
        .panel-header i { font-size: 1.3rem; }
        .panel-header h3 { font-size: 1.3rem; }
        .quote-form { display: flex; flex-direction: column; gap: 15px; }
        .form-group { display: flex; flex-direction: column; gap: 6px; }
        .form-group label { font-size: 0.95rem; color: #bdc3c7; display: flex; align-items: center; gap: 8px; }
        .form-group input, .form-group select, .form-group textarea { background: rgba(44,62,80,0.7); border: 1px solid rgba(127,140,141,0.3); border-radius: 8px; padding: 10px 12px; color: var(--light); font-size: 0.95rem; }
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--secondary); }
        .submit-btn { background: linear-gradient(135deg, var(--secondary), #2980b9); border: none; padding: 12px; border-radius: 8px; color: white; font-weight: bold; cursor: pointer; font-size: 1rem; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; }
        .submit-btn:hover { background: linear-gradient(135deg, #3ca0db, #2c8bc9); }
        .quote-result { background: rgba(26,37,48,0.9); border-radius: 10px; padding: 25px; margin-top: 25px; display: none; }
        .quote-result.show { display: block; animation: fadeIn 0.5s; }
        .quote-header { text-align: center; margin-bottom: 20px; }
        .quote-header h3 { font-size: 1.5rem; color: var(--secondary); margin-bottom: 5px; }
        .quote-details { margin-bottom: 20px; }
        .quote-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed rgba(127,140,141,0.3); }
        .quote-total { background: rgba(44,62,80,0.6); padding: 15px; border-radius: 8px; display: flex; justify-content: space-between; font-size: 1.3rem; font-weight: bold; margin: 20px 0; }
        .quote-actions { display: flex; justify-content: center; gap: 15px; }
        .action-btn { padding: 10px 20px; border-radius: 5px; border: none; font-weight: bold; cursor: pointer; }
        .action-btn.accept { background: linear-gradient(135deg, var(--success), #27ae60); color: white; }
        .action-btn.reject { background: rgba(44,62,80,0.5); color: var(--light); border: 1px solid var(--danger); }
        .history-list { max-height: 300px; overflow-y: auto; margin-top: 25px; }
        .history-item { background: rgba(44,62,80,0.6); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
        .history-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
        .history-price { color: var(--success); font-weight: bold; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        @media (max-width: 768px) {
            .navbar { flex-direction: column; gap: 10px; }
            .nav-links { width: 100%; justify-content: space-around; }
            .header h2 { font-size: 1.5rem; }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="logo">
            <i class="fas fa-truck-moving"></i>
            <h1>物流智能报价</h1>
        </div>
        <div class="nav-links">
            <a href=" " class="nav-link">
                <i class="fas fa-map-marked-alt"></i>
                <span>实时监控</span>
            </a >
            <a href="#" class="nav-link active">
                <i class="fas fa-file-invoice-dollar"></i>
                <span>预约报价</span>
            </a >
        </div>
    </nav>
    
    <div class="container">
        <div class="header">
            <h2>物流预约报价系统</h2>
            <p>快速获取精准报价，提交预约后5分钟内返回结果</p >
        </div>
        
        <div class="panel">
            <div class="panel-header">
                <i class="fas fa-file-invoice"></i>
                <h3>报价请求</h3>
            </div>
            
            <form class="quote-form" id="quoteForm">
                <div class="form-group">
                    <label for="from"><i class="fas fa-map-marker-alt"></i> 起始地</label>
                    <input type="text" id="from" placeholder="请输入起始地" required>
                </div>
                
                <div class="form-group">
                    <label for="to"><i class="fas fa-flag"></i> 目的地</label>
                    <input type="text" id="to" placeholder="请输入目的地" required>
                </div>
                
                <div class="form-group">
                    <label for="cargoType"><i class="fas fa-box"></i> 货物类型</label>
                    <select id="cargoType" required>
                        <option value="">请选择货物类型</option>
                        <option value="general">普通货物</option>
                        <option value="fragile">易碎品</option>
                        <option value="perishable">生鲜食品</option>
                        <option value="electronics">电子产品</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="weight"><i class="fas fa-weight-hanging"></i> 重量 (kg)</label>
                    <input type="number" id="weight" placeholder="请输入货物重量" min="1" required>
                </div>
                
                <div class="form-group">
                    <label for="volume"><i class="fas fa-cube"></i> 体积 (m³)</label>
                    <input type="number" id="volume" placeholder="请输入货物体积" min="0.1" step="0.1" required>
                </div>
                
                <button type="submit" class="submit-btn">
                    <i class="fas fa-paper-plane"></i> 提交报价请求
                </button>
            </form>
            
            <div class="quote-result" id="quoteResult">
                <div class="quote-header">
                    <h3><i class="fas fa-file-invoice-dollar"></i> 报价结果</h3>
                    <p>以下是根据您提供的信息计算的报价</p >
                </div>
                
                <div class="quote-details">
                    <div class="quote-row">
                        <span>服务类型:</span>
                        <span>标准物流运输</span>
                    </div>
                    <div class="quote-row">
                        <span>起始地:</span>
                        <span id="resultFrom">上海</span>
                    </div>
                    <div class="quote-row">
                        <span>目的地:</span>
                        <span id="resultTo">南京</span>
                    </div>
                    <div class="quote-row">
                        <span>货物类型:</span>
                        <span id="resultType">电子产品</span>
                    </div>
                    <div class="quote-row">
                        <span>重量/体积:</span>
                        <span id="resultSize">850kg / 5.2m³</span>
                    </div>
                    <div class="quote-row">
                        <span>运输距离:</span>
                        <span>312公里</span>
                    </div>
                    <div class="quote-row">
                        <span>预计时间:</span>
                        <span>18-24小时</span>
                    </div>
                </div>
                
                <div class="quote-total">
                    <span>总费用:</span>
                    <span id="resultPrice">¥2,850.00</span>
                </div>
                
                <div class="quote-actions">
                    <button class="action-btn accept">接受报价</button>
                    <button class="action-btn reject">重新提交</button>
                </div>
            </div>
        </div>
        
        <div class="panel">
            <div class="panel-header">
                <i class="fas fa-history"></i>
                <h3>历史报价记录</h3>
            </div>
            
            <div class="history-list">
                <div class="history-item">
                    <div class="history-header">
                        <span>2023-07-15</span>
                        <span class="history-price">¥2,850</span>
                    </div>
                    <div class="history-content">
                        <span>上海 → 南京</span>
                        <span>电子产品 · 850kg</span>
                    </div>
                </div>
                
                <div class="history-item">
                    <div class="history-header">
                        <span>2023-07-12</span>
                        <span class="history-price">¥1,450</span>
                    </div>
                    <div class="history-content">
                        <span>杭州 → 苏州</span>
                        <span>普通货物 · 420kg</span>
                    </div>
                </div>
                
                <div class="history-item">
                    <div class="history-header">
                        <span>2023-07-10</span>
                        <span class="history-price">¥3,200</span>
                    </div>
                    <div class="history-content">
                        <span>北京 → 上海</span>
                        <span>生鲜食品 · 1200kg</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('quoteForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 显示加载状态
            const submitBtn = this.querySelector('.submit-btn');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 计算中...';
            submitBtn.disabled = true;
            
            // 获取表单数据
            const from = document.getElementById('from').value;
            const to = document.getElementById('to').value;
            const cargoType = document.getElementById('cargoType').options[document.getElementById('cargoType').selectedIndex].text;
            const weight = document.getElementById('weight').value;
            const volume = document.getElementById('volume').value;
            
            // 模拟5秒计算时间
            setTimeout(() => {
                // 恢复按钮状态
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
                
                // 更新结果
                document.getElementById('resultFrom').textContent = from;
                document.getElementById('resultTo').textContent = to;
                document.getElementById('resultType').textContent = cargoType;
                document.getElementById('resultSize').textContent = weight + 'kg / ' + volume + 'm³';
                
                // 计算随机价格（基于重量和距离）
                const basePrice = weight * 1.5 + volume * 100;
                const distanceFactor = Math.abs(from.length - to.length) * 100;
                const totalPrice = basePrice + distanceFactor + Math.floor(Math.random() * 500);
                
                document.getElementById('resultPrice').textContent = '¥' + totalPrice.toFixed(2);
                
                // 显示结果
                document.getElementById('quoteResult').classList.add('show');
                
                // 添加到历史记录
                addToHistory(from, to, cargoType, weight, volume, totalPrice);
            }, 5000);
        });
        
        // 添加到历史记录
        function addToHistory(from, to, type, weight, volume, price) {
            const historyList = document.querySelector('.history-list');
            const historyItem = document.createElement('div');
            historyItem.className = 'history-item';
            historyItem.innerHTML = `
                <div class="history-header">
                    <span>${new Date().toLocaleDateString()}</span>
                    <span class="history-price">¥${price.toFixed(2)}</span>
                </div>
                <div class="history-content">
                    <span>${from} → ${to}</span>
                    <span>${type} · ${weight}kg</span>
                </div>
            `;
            historyList.insertBefore(historyItem, historyList.firstChild);
        }
        
        // 重置结果
        document.querySelector('.action-btn.reject').addEventListener('click', function() {
            document.getElementById('quoteResult').classList.remove('show');
            document.getElementById('quoteForm').reset();
        });
    </script>
</body>
</html>